<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name='keywords' content='云竹众包'>
    <meta name='description' content='云竹众包'>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>云竹众包-test</title>

    <link rel="stylesheet" href="/yunzhuVue/build/css/base.css">
    <link rel="stylesheet" href="/yunzhuVue/build/css/int.css">
    <link rel="stylesheet" href="/yunzhuVue/build/css/task.css">
</head>
<body>

<section id="task-main">
    <div class="container">
        <div class="task-main-body">
            <!-- task-menu -->
            <div id="task-menu">
                <div class="task-type">
                    <p class="task-title">任务类型</p>

                    <div class="task-type-btn clearfix">
                        <a href="javascript:;" class="tktp-btn task-type-actv">竞标任务</a>
                        <a href="javascript:;" class="tktp-btn">悬赏任务</a>
                    </div>
                </div>

                <div class="task-classify">
                    <p class="task-title">任务行业分类</p>

                    <div class="task-cf-body">
                        <ul class="task-cf-parent">
                            <li>
                                <div class="tk-cf-title">
                                    <a href="javascript:;" id="tag1" data-show-tag="0" class="tk-cf-pt-lk">企业法务</a>
                                    <i class="tk-cf-pt-ico"></i>
                                </div>

                                <ul class="task-cf-child" data-tkmn-tag="tag1">
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">企业理账</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">财务审计</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">税务签证</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">纳税筹划</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">代理报税</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">代理记账</a>
                                    </li>

                                </ul>
                            </li>

                            <li>
                                <div class="tk-cf-title">
                                    <a href="javascript:;" id="tag2" data-show-tag="0" class="tk-cf-pt-lk">企业财务</a>
                                    <i class="tk-cf-pt-ico"></i>
                                </div>

                                <ul class="task-cf-child" data-tkmn-tag="tag2">
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">二级业务分类名</a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <div class="tk-cf-title">
                                    <a href="javascript:;" id="tag3" data-show-tag="0" class="tk-cf-pt-lk">互联网+</a>
                                    <i class="tk-cf-pt-ico"></i>
                                </div>

                                <ul class="task-cf-child" data-tkmn-tag="tag3">
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">二级业务分类名</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">二级业务分类名</a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <div class="tk-cf-title">
                                    <a href="javascript:;" id="tag4" data-show-tag="0" class="tk-cf-pt-lk">投融资</a>
                                    <i class="tk-cf-pt-ico"></i>
                                </div>

                                <ul class="task-cf-child" data-tkmn-tag="tag4">
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">二级业务分类名</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">二级业务分类名</a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <div class="tk-cf-title">
                                    <a href="javascript:;" id="tag5" data-show-tag="0" class="tk-cf-pt-lk">其他服务</a>
                                    <i class="tk-cf-pt-ico"></i>
                                </div>

                                <ul class="task-cf-child" data-tkmn-tag="tag5">
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">二级业务分类名</a>
                                    </li>
                                    <li>
                                        <a href="javascript:;" class="tk-cf-cd-lk">二级业务分类名</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="task-filter task-budget">
                    <p class="task-title">预算大小筛选</p>

                    <div class="tk-ft-main">
                        <div class="tk-ft-com">
                            <input type="radio" name="task-dbt" id="total">
                            <label for="total">全部任务</label>
                        </div>

                        <div class="tk-ft-com">
                            <input type="radio" name="task-dbt" id="task-a">
                            <label for="task-a">小项目(3000~3万)</label>
                        </div>

                        <div class="tk-ft-com">
                            <input type="radio" name="task-dbt" id="task-b">
                            <label for="task-b">中项目(3万~10万)</label>
                        </div>

                        <div class="tk-ft-com">
                            <input type="radio" name="task-dbt" id="task-c">
                            <label for="task-c">大项目(10万以上)</label>
                        </div>
                    </div>
                </div>

                <div class="task-filter">
                    <p class="task-title">任务进度筛选</p>

                    <div class="tk-ft-main">
                        <div class="tk-ft-com">
                            <input type="radio" name="task-tag" id="task-ing">
                            <label for="task-ing">正在招募</label>
                        </div>

                        <div class="tk-ft-com">
                            <input type="radio" name="task-tag" id="task-over">
                            <label for="task-over">招募结束</label>
                        </div>
                    </div>

                    <a href="javascript:;" class="task-filter-btn">发布任务</a>
                </div>
            </div>

            <!-- task-content（右侧内容） -->
            <div class="task-content">
                <!-- crumb -->
                <div id="crumb" class="clearfix">
                    <div class="crumb-slt">
                        <a href="javascript:;">综合</a>
                        <a href="javascript:;">
                            <span>发布时间</span>
                            <img src="/yunzhuVue/image/task/sort.svg" alt="img">
                        </a>
                        <a href="javascript:;">
                            <span>报名人数</span>
                            <img src="/yunzhuVue/image/task/sort.svg" alt="img">
                        </a>
                    </div>

                    <div class="crumb-city">
                        <div id="target">
                            <select id="city"></select>
                            <select id="local"></select>
                        </div>
                    </div>
                </div>

                <!-- recruit -->
                <div id="recruit">

                    <!-- 看板 start -->
                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="recruit-com"> <!-- relative -->

                        <!-- 看板头部 -->
                        <div class="rct-img">
                            <img src="/yunzhuVue/image/1-2.png" alt="img">
                            <div class="rct-tag">
                                <p>正在招募</p>
                                <h6>二级分类名</h6>
                            </div>
                            <a href="javascript:;" class="rct-img-lk">
                                报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余报名剩余
                            </a>
                        </div>

                        <!-- 看板内容 -->
                        <div class="rct-ct">
                            <h4>这里是标题大概十六个字左右就行了</h4>
                            <div class="rct-board">
                                <a href="javascript:;">
                                    <span><strong>17</strong>天</span>
                                    <span>报名剩余</span>
                                </a>
                                <a href="javascript:;">
                                    <span><strong>1277</strong>人</span>
                                    <span>报名任务</span>
                                </a>
                            </div>
                        </div>

                        <!-- 看板底部 -->
                        <div class="rct-foot">
                            <div class="rct-foot-body clearfix">
                                <a href="javascript:;" class="rct-ft-btn">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>收藏任务</span>
                                </a>
                                <a href="javascript:;" class="rct-ft-btn rct-ft-btn-actv">
                                    <img src="/yunzhuVue/image/task/slt.svg" alt="img">
                                    <span>了解更多</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="pagination">

                </div>
            </div>
        </div>
    </div>
</section>


<script src="/yunzhuVue/plugin/jquery-3.1.1/jquery-3.1.1.js"></script>
<script src="/yunzhuVue/plugin/Vue/vue.js"></script>
<script src="/yunzhuVue/plugin/Vue/vue-router/dist/vue-router.js"></script>

<!-- 选择省市 -->
<script src="/yunzhuVue/plugin/distpicker-master/dist/distpicker.js"></script>

<!-- 分页器 -->
<script src="/yunzhuVue/plugin/laypage-v1.3/laypage/laypage.js"></script>


<script>
/**
 * task-menu相关JS
 */

//分页器
laypage({
    cont: $('#pagination'), //容器。值支持id名、原生dom对象，jquery对象,
    pages: 10, //总页数
    skip: true, //是否开启跳页
    skin: '#5CBD30',
    groups: 4 //连续显示分页数
});

//任务类型按钮点击切换
var typeBtn = $('.tktp-btn');
typeBtn.on('click', function () {
    typeBtn.removeClass("task-type-actv");
    $(this).addClass("task-type-actv");
});

//本地存储
function storageMsg() {
    var arrShow = [];
    type_menu.each(function (index, el) {
        arrShow[index] = parseInt($(el).attr('data-show-tag'));
    });

    localStorage.setItem("menuStorage", arrShow);
}

//任务菜单展开与否
var type_menu = $('.tk-cf-pt-lk');
var bg = 'url("/yunzhuVue/image/task/drop-dw.svg")';
var bg1 = 'url("/yunzhuVue/image/task/drop-dw1.svg")';

// 获取菜单本地储存，判断菜单显隐状态
var getStorage = localStorage.getItem("menuStorage");

// 存在记忆才会执行
if(getStorage){
    var newMenu = getStorage.split(",");

    type_menu.each(function (index, el) {
        var mb = $(el).parent().next(); // 获取子菜单
        var _ico = $(el).next(); // 获取图标

        if (parseInt(newMenu[index]) === 0) {
            $(el).attr('data-show-tag', "0");
            mb.height(0);
            _ico.css('background-image', bg);
        } else {
            $(el).attr('data-show-tag', "1");
            var mH = mb.children().length * 34; // 获取子菜单内的子元素总长度
            mb.height(mH);
            _ico.css('background-image', bg1);
        }
    });
}

//点击任务菜单 -->展开 / 隐藏，图标变化
type_menu.on('click', function () {
    var mb = $(this).parent().next(); // 获取子菜单
    var ico = $(this).next(); // 获取图标
    var tag = parseInt($(this).attr('data-show-tag'));

    if (tag != 0) {
        mb.height(0);
        $(this).attr('data-show-tag', "0");
        ico.css('background-image', bg);
    } else {
        var mH = mb.children().length * 34; // 获取子菜单内的子元素总长度
        mb.height(mH);
        $(this).attr('data-show-tag', "1");
        ico.css('background-image', bg1);
    }

    storageMsg();
});

/**
 *  地区选择器
 */
// 默认值
$('#target').distpicker({
    province: '四川省',
    city: '成都市'
});

// 获取默认选择地区
var area = []; // 获取到的数据

var slt = $('#target select');
slt.each(function(index, el){
    var md = $(el).attr('selected',true).val();
    area[index] = md;
});

// 监听选择框变化
slt.on('change', function(){
    var theId = $(this).attr('id');
    var md = $(this).attr('selected',true).val();
    if(theId === "city"){
        area[0] = md;
        area[1] = "";
    }else {
        area[1] = md;
    }
})

</script>
</body>
</html>